<script setup lang="ts">
import { useInitTable, useInitForm } from '@/composables/useCommon'
import { reqGoodsList, reqUpdateGoodsStatus, reqAddGoods, reqUpdateGoods, reqDeleteGoods, reqAuditGoods } from '@/api/goods'
import FormDrawer from '@/components/FormDrawer.vue'
import { showMessage } from '@/utils/elementTools'

interface Cate {
  id: number
  name: string
  status: number
  create_time: string
  update_time: string
  category_id: number
  order: number
  level: number
}
const cates = ref<Cate[]>([])

const {
  query,
  searchFormRef,
  handleReset,
  tableData,
  loading,
  currentPage,
  pageSize,
  total,
  getData,
  handleStatusChange,
  handleDelete,
  tableRef,
  handleDeleteAll,
  handleUpdateManyStatus,
  handleSelectionChange
} = useInitTable({
  query: { title: '', tab: 'all', category_id: null, limit: 5 },
  getList: reqGoodsList,
  delete: reqDeleteGoods,
  updateManyStatus: reqUpdateGoodsStatus,
  onGetListSuccess: (res: any) => {
    tableData.value = res.data.list
    cates.value = res.data.cates
  }
})

const { formDrawerRef, formRef, drawerTitle, form, rules, handleSubmit, handleAdd, handleEdit } = useInitForm({
  getData,
  update: reqUpdateGoods,
  create: reqAddGoods,
  initialForm: {
    title: '',
    category_id: null,
    cover: null,
    desc: '',
    unit: '',
    stock: 0,
    min_stock: 0,
    status: 1,
    stock_display: 1,
    min_price: 0,
    min_oprice: 0
  },
  rules: {
    title: [{ required: true, message: '商品名称不能空', trigger: 'blur' }],
    stock: [{ required: true, message: '总库存不能空', trigger: 'blur' }],
    min_stock: [{ required: true, message: '库存预警不能空', trigger: 'blur' }]
  }
})
const tabbars = [
  { name: '全部', key: 'all' },
  { name: '审核中', key: 'checking' },
  { name: '出售中', key: 'saling' },
  { name: '已下架', key: 'off' },
  { name: '库存预警', key: 'min_stock' },
  { name: '回收站', key: 'delete' }
]
// 上架 下架
const StatusChange = (status: number) => {
  handleUpdateManyStatus(status)
}
// 审核 1同意 2拒绝
const handleAuditGoods = (id: number, ischeck: number) => {
  reqAuditGoods(id, ischeck).then((res) => {
    showMessage('操作成功')
    getData()
  })
}
</script>

<template>
  <div class="mt-1">
    <el-tabs v-model="query.tab" @tab-change="getData" class="ml-5">
      <el-tab-pane :label="item.name" :name="item.key" v-for="(item, index) in tabbars" :key="index" />
    </el-tabs>
    <el-card shadow="never" style="border: 0; margin: 10px">
      <div style="margin: 10px">
        <!-- 搜索表单 -->
        <el-form ref="searchFormRef" :inline="true" :model="query">
          <el-row :gutter="20">
            <el-col :span="4" :offset="0">
              <el-form-item label="关键词">
                <el-input v-model="query.title" placeholder="请输入商品名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item>
                <el-button type="primary" icon="search" @click="getData">搜索</el-button>
                <el-button type="default" icon="eleme" @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="5">
              <el-tooltip effect="dark" content="刷新数据" placement="top">
                <el-button icon="refresh" @click="getData">刷新数据</el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <ListHeader
        layout="create,refresh,delete,statusOn,statusOff"
        @refresh="getData"
        @create="handleAdd"
        @delete="handleDeleteAll"
        @statusChange="StatusChange"
      />
      <!-- 数据表Table -->
      <el-table
        ref="tableRef"
        :data="tableData"
        stripe
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="商品" width="300" align="center">
          <template #default="{ row }">
            <div class="flex items-center">
              <el-image class="mr-3 rounded" :src="row.cover" fit="cover" :lazy="true" style="width: 70px; height: 70px" />
              <div class="flex-1" style="text-align: left">
                <p class="font-bold">{{ row.title }}</p>
                <div>
                  <span class="text-rose-500">¥{{ row.min_price }}</span>
                  <el-divider direction="vertical" />
                  <span class="text-gray-500 text-xs">¥{{ row.min_oprice }}</span>
                </div>
                <p class="text-gray-400 text-xs mb-1">分类：{{ row.category ? row.category.name : '未分类' }}</p>
                <p class="text-gray-400 text-xs">创建时间：{{ row.create_time }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实际销量" prop="sale_count" width="80" align="center" />
        <el-table-column label="商品状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'danger' : 'success'" size="small">{{ row.status ? '已下架' : '在售中' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="140" align="center">
          <template #default="{ row }">
            <div v-if="row.ischeck == 0" class="flex flex-col items-center">
              <el-button class="my-1" size="small" type="success" @click="handleAuditGoods(row.id, 1)">审核通过</el-button>
              <el-button class="my-1 !ml-0" size="small" type="danger" @click="handleAuditGoods(row.id, 2)">审核拒绝</el-button>
            </div>
            <span v-else>{{ row.ischeck == 1 ? '审核通过' : '审核不通过' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总库存" prop="stock" width="120" align="center" />

        <el-table-column label="操作" width="450" align="center">
          <template #default="{ row }">
            <div>
              <el-button class="px-1" size="small" text type="primary" icon="edit" @click="handleEdit(row)">编辑</el-button>
              <el-button class="px-1" size="small" text type="primary">商品规格</el-button>
              <el-button class="px-1" size="small" text type="primary">设置轮播图</el-button>
              <el-button class="px-1" size="small" text type="success">商品详情</el-button>
              <el-popconfirm title="是否确认要删除吗?" width @confirm="handleDelete(row.id)">
                <template #reference>
                  <el-button class="px-1" size="small" text type="danger" icon="delete">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="getData"
        ></el-pagination>
      </div>

      <!-- 表单抽屉 -->
      <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit(currentPage || 1)">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="商品名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入商品名称" clearable style="width: 70%" />
          </el-form-item>

          <el-form-item label="封面" prop="cover">
            <ChooseImage v-model="form.cover" />
          </el-form-item>

          <el-form-item label="商品分类" prop="category_id">
            <el-select v-model="form.category_id" placeholder="请选择分类" style="width: 30%">
              <el-option v-for="item in cates" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品描述" prop="desc">
            <el-input v-model="form.desc" type="textarea" :row="6" placeholder="请输入商品备注" clearable style="width: 90%" />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入商品单位" clearable style="width: 30%" />
          </el-form-item>
          <el-form-item label="总库存" prop="stock">
            <el-input v-model="form.stock" style="width: 30%">
              <template #append>件</template>
            </el-input>
          </el-form-item>
          <el-form-item label="库存预警" prop="min_stock">
            <el-input v-model="form.min_stock" style="width: 30%">
              <template #append>件</template>
            </el-input>
          </el-form-item>
          <el-form-item label="最低销售价" prop="min_price">
            <el-input v-model="form.min_price" style="width: 30%">
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="市场价" prop="min_oprice">
            <el-input v-model="form.min_oprice" style="width: 30%">
              <template #append>元</template>
            </el-input>
          </el-form-item>

          <el-form-item label="库存显示" prop="stock_display">
            <el-radio-group v-model="form.stock_display">
              <el-radio :value="0">隐藏</el-radio>
              <el-radio :value="1">显示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否上架" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :value="0">仓库</el-radio>
              <el-radio :value="1">上架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </FormDrawer>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
</style>
